<template>
  <div>
    <el-row>
      <button>定位</button>
      <button>获取中心点</button>
      <button @click="toline">画折线</button>
      <button @click="toPoint">添加点</button>
      <button @click="toDark">变色</button>
    </el-row>
    <div id="container"></div>
  </div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
  data() {
    return {
      map: null
    }
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap()
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: 'a502a10c36c57861d480ddb2c24fdeef', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [''] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then(AMap => {
          this.map = new AMap.Map('container', {
            //设置地图容器id
            viewMode: '3D', //是否为3D地图模式
            zoom: 5, //初始化地图级别
            center: [116.368904, 39.913423] //初始化地图中心点位置
          })
          this.map.setZoom(13)
          // 获取地图级别
          var currentZoom = map.getZoom()
        })
        .catch(e => {
          console.log(e)
        })
    },
    //画折线
    toline() {
      // 创建一条折线覆盖物
      var path = [
        new AMap.LngLat('116.368904', '39.913423'),
        new AMap.LngLat('116.382122', '39.901176'),
        new AMap.LngLat('116.387271', '39.912501'),
        new AMap.LngLat('116.398258', '39.904600')
      ]
      var polyline = new AMap.Polyline({
        path: path,
        borderWeight: 2, // 线条宽度，默认为 1
        strokeColor: 'red', // 线条颜色
        lineJoin: 'round' // 折线拐点连接处样式
      })
      this.map.add(polyline)
    },
    //添加点
    toPoint() {
      // 创建两个点标记
      var marker1 = new AMap.Marker({
        position: new AMap.LngLat(117.39, 39.9), // 经纬度对象，如 new AMap.LngLat(116.39, 39.9); 也可以是经纬度构成的一维数组[116.39, 39.9]
        title: '北京'
      })
      var marker2 = new AMap.Marker({
        position: new AMap.LngLat(118.39, 39.9), // 经纬度对象，如 new AMap.LngLat(116.39, 39.9); 也可以是经纬度构成的一维数组[116.39, 39.9]
        title: '北京'
      })
      this.map.add(marker1)
      this.map.add(marker2)
      // 自动适配到合适视野范围
      // 无参数，默认包括所有覆盖物的情况
      this.map.setFitView()
      // 传入覆盖物数组，仅包括polyline和marker1的情况
      this.map.setFitView([marker1])
    },
    toDark() {
      this.map.setMapStyle('amap://styles/blue')
    }
  }
}
</script>

<style scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 800px;
}
</style>
